<template>
  <div class="home-box">
    <el-row class="shop-box" :gutter="20">
      <el-col :span="6">
        <el-card class="shop-item" shadow="hover">
          <div class="card-box">
            <div class="item-icon">
              <el-icon>
                <Coin />
              </el-icon>
            </div>
            <div class="item-tite">
              <p class="item-today">今日收入</p>
              <p class="item-price">503,225.00</p>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <el-row class="chart-box" :gutter="20">
      <el-col :span="12">
        <common-chart chart-type="bar" :options="barOptions"></common-chart>
      </el-col>
      <el-col :span="12">
        <common-chart chart-type="line" :options="lineOptions"></common-chart>
      </el-col>
    </el-row>
    <el-row class="table-box" :gutter="20">
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val,key) in tableLabel" :key="key"  :prop="key" :label="val"/>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { color } from 'echarts';
import CommonChart from '../../components/CommonChart.vue';
import { onMounted, ref,getCurrentInstance } from 'vue';
// 获取上下文信息
const {proxy} = getCurrentInstance()
// import axios from 'axios'
// import request from '../.././api/request.js'
// 表格标头数据
const tableLabel ={
  name:'商品',
  todayBuy:'今日购买',
  monthBuy:'本月购买',
  totalBuy:'总购买',
}
// 表格数据
let tableData = ref([])

// 条形图
const barOptions = {
  color: ['rgb(51, 202, 187)',],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(10,10,10,.6)',
    textStyle: {
      color: '#fff'
    },
    borderColor: 'rgba(10,10,10,.6)'
  },
  xAxis: {
    type: 'category',
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
// 折线图
const lineOptions = {
  color: ['rgb(51, 202, 187)',],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(10,10,10,.6)',
    textStyle: {
      color: '#fff'
    },
    borderColor: 'rgba(10,10,10,.6)'
  },
  xAxis: {
    type: 'category',
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']

  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    }
  ]
};
const getTableList = async ()=>{
  let res = await proxy.$api.getTableData()
  console.log(res);
  tableData.value=res.tableData
}


onMounted(() => {
  getTableList()
})

</script>

<style lang="less">
.shop-box {
  height: 120px;
  background-color: #fff;
  border-radius: 5px;

  .shop-item {
    height: 100px;
    margin: 10px 0;
    background-color: rgb(51, 202, 187);
    color: #fff;
    border-radius: 5px;

    .el-card__body {
      width: 100%;
      height: 100%;
      padding: 0 20px;
    }

    .card-box {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;

      .item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(180, 180, 180, .4);
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .item-today {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
      }
    }
  }
}

.chart-box {
  margin-top: 20px;
  background-color: #fff;
  height: 300px;
}

.table-box {
  margin-top: 20px;
  background-color: #fff;
}
</style>